<template>
    <div>
        <Header></Header>
        <div class="mblog">
            <h3>{{blog.title}}</h3>
            <el-link icon="el-icon-edit" v-if="ownBlog"><router-link :to="{name: 'BlogEdit', params: {blogId: blog.id}}">编辑</router-link></el-link>

            <el-divider></el-divider>

            <div class="content markdown-body" v-html="blog.content"></div>
        </div>

    </div>
</template>

<script>

    import 'github-markdown-css/github-markdown.css' // 然后添加样式markdown-body
    import Header from '../components/Header'
    export default {
        name: "BlogDetail",
        components: {Header},
        data(){
            return{
                blog:{
                    userId: null,
                    id:'',
                    content:'',
                    title:'',
                    description:''
                },
                ownBlog:''

            }
        },
        created() {
            const blogId = this.$route.params.blogId
            const _this = this
            if (blogId){
                _this.$axios.get('/blog/detail/'+blogId).then(res=>{
                    console.log(res)
                    const blog = res.data.data
                    _this.blog.id = blog.id
                    _this.blog.userId = blog.userId
                    _this.blog.title = blog.title
                    _this.blog.description = res.data.data.description
                    var MarkdownIt = require('markdown-it'),
                    md = new MarkdownIt();
                    var result = md.render(blog.content);
                    _this.blog.content = result
                    //判断是否是自己的文章
                    _this.ownBlog =  (_this.blog.userId === _this.$store.getters.getUserInfo.id)
                })
            }
        }
    }
</script>

<style scoped>
.mblog{
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
    min-height: 500px;
}
</style>